<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    v-cloak {
      display: none;
    }

    .admin {
      margin: 5px 0;
    }

    .input {
      width: 280px;
      height: 280px;
      box-shadow: 0 0 10px rgb(0, 0, 0, 0.2);
      padding-top: 30px;
      padding-left: 50px;
      margin: 30px auto;
      box-shadow: 0 0 10px rgb(0, 0, 0, 0.2);
    }

    .box {
      width: 1100px;
      margin: 0 auto;
      box-shadow: 0 0 10px rgb(0, 0, 0, 0.2);
      margin-top: 10px;
    }

    .list_render {
      text-align: center;
    }

    .list_render tr {
      height: 29px;
      line-height: 29px;
      background-color: #ccc;
      font-size: 14px;
      color: #333;
    }

    .search {
      padding: 5px 230px;
      background-color: salmon;
      overflow: hidden;
      width: 640px;
      margin: 0 auto;
      display: flex;
      justify-content: space-around;
      align-items: center;
    }

    .search-input {
      width: 150px;
    }

    .search p {
      font-size: 16px;
      font-weight: 400;
      display: inline-block;
    }

    .search-box {
      width: 180px;
    }

    .date {
      display: inline-block;
      width: 150px;
    }

    .update-box {
      display: none;
      position: fixed;
      left: 30%;
      top: 30%;
      width: 280px;
      height: 300px;
      padding-left: 70px;
      box-shadow: 0 0 10px rgb(0, 0, 0, 0.4);
      padding-top: 30px;
      z-index: 10;
      background-color: #fff;
    }

    label {
      font-size: 14px;
      color: #333;
      font-weight: 600;
    }

    .input button {
      margin-top: 20px;
      background-color: salmon;
      width: 100px;
      line-height: 20px;
      font-size: 14px;
    }

    .mask {
      display: none;
      background-color: rgba(0, 0, 0, 0.6);
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
    }

    a {
      cursor: pointer;
      color: rgb(51, 38, 167);
    }

    .col {
      padding: 5px 0;
    }

    .alsrtInfo {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 10;
      background: rgba(0, 0, 0, 0.1);
    }

    .profPrompt_test {
      cursor: pointer;
      padding: 30px 10px;
      width: 480px;
      overflow: hidden;
      line-height: 28px;
      border: 1px solid #4eb6d3;
      color: #4eb6d3;
      position: absolute;
      background-color: #fbfbfb;
      top: 356px;
      left: 50%;
      font-size: 14px;
      font-family: Gotham-Book;
      opacity: 1;
      /* z-index: 1; */
      text-align: center;
      transform: translate(-50%, -50%);
    }

    .profPrompt_test button {
      font-size: 10px;
      padding: 3px;
      border: 1px solid #4eb6d3;
      position: relative;
      top: 28px;
      left: -70px;
      color: #4eb6d3;
      background-color: #fff;
    }

    .profPrompt_test button:focus {
      outline: none;
    }
  </style>
</head>

<body>

  <div id="cl">
   
    <div class="input">

      <div class="col">
        <label>用户名：</label><input v-valid.len="{len:4,fn}" type='text' class="admin username" v-model='username'
          placeholder="用户名">
      </div>
      <div class="col">
        <label>年龄：</label><input v-valid.age="{fn}" type='text' class="admin age" v-model.number='age' placeholder="年龄">
      </div>
      <div class="col">
        <label>手机号：</label><input v-valid.phone="{fn}" type='text' class="admin phone" v-model.number='phone'
          placeholder="手机号">
      </div>
      <div class="col">
        <label>邮箱：</label><input v-valid.email="{fn}" type="text" class="admin email" v-model='email' placeholder="邮箱">
      </div>
      <div class="col">
        <label>爱好：</label>
        <input type="checkbox" value="看书" class="hobbies" v-model='hobbies'>看书
        <input type="checkbox" value="写作业" class="hobbies" v-model='hobbies'>写作业
        <input type="checkbox" value="玩手机" class="hobbies" v-model='hobbies'>玩手机
      </div>
      <div>
        <button class="btn" style="margin-left: 60px;" @click='dopost'>添加用户</button>
      </div>
    </div>
    <div class="search">
      <p>输入搜索内容：<input type="text" class="search-input" placeholder="search..." v-model='search'
          style="display: inline-block; text-align: right;"></p>
      <button @click='dosearch()' class="f_btn" style="width: 70px; margin: 0;">搜索</button>
    </div>
    <table class="box">
      <thead>
        <th><input type="checkbox" class="all_checkbox" @click='allfn' v-model='checked'></th>
        <th v-for='(item,index) in thead' v-text=item></th>
      </thead>
      <tbody class="list_render">
        <tr v-for='(item,index) in lists' v-if='currentIndex===index? false:true' :data-id='item._id'>
          <td><input type='checkbox' class='ren_checkbox' value="ren_checkbox" v-model='checkboxlist' @click='sin(index)'></td>
          <td v-text='item.username'></td>
          <td v-text='item.age '></td>
          <td v-text='item.phone'></td>
          <td v-text='item.email'></td>
          <td v-text='item.hobbies'></td>
          <td><a href='javascript:;' class='update-btn' :data-id='item._id'>修改</a></td>
          <td><a href='javascript:;' @click='alertMsg("确定删除")' :data-id='item._id'
              class='del-btn'>删除</a></td>
          <td>
            <div class="alsrtInfo" v-cloak :style="{display: displayStsates}" ref="alertMsg">
              <div class="profPrompt_test">{{aletMsg}}
                <button @click='dodelete(index,item._id,"你已经删除")'>确定</button><button style=" left:-50px;">取消</button>
              </div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <script src="../../js/vue.js"></script>
  <script src="../../js/jquery-3.5.1.min.js"></script>
  <script src="./add.js"></script>
  <script>
    Vue.directive( 'valid', ( el, binds ) => {
      // 获取修饰符中的变量值
      const modifiers = binds.modifiers

      // 是否是判断字符串长度的
      if ( modifiers.len ) {
        // 字符串长度限制
        let len = binds.value.len || 6
        if ( el.value.length > len ) {
          binds.value.fn()
          el.style.color = 'red'
        } else {

          console.log( this.btn );
          this.btn = false;
          el.style.color = ''
        }
      }

      //年龄是否合法
      // if(modifiers.age){
      //   let preg=/^((1[0-5])|[1-9])?\d$/
      //   if(!preg.test(el.age)){
      //     el.style.color='red'
      //   }else{
      //     el.style.color=''
      //   }
      // }

      // 手机号码是否合法
      if ( modifiers.phone ) {
        let preg = /^1[3-9]\d{9}$/
        if ( !preg.test( el.value ) ) {
          // binds.value.fn()
          el.style.color = 'red'
        } else {
          el.style.color = ''
        }
      }

      //邮箱是否合法
      if ( modifiers.email ) {
        let preg = /^[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*@[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*\.[a-z]{2,}$/
        if ( !preg.test( el.value ) ) {
          // binds.value.fn()
          el.style.color = 'red'
        } else {
          el.style.color = ''
        }
      }
    } )
    Vue.mixin( {
      mounted() {
        this.find();
      },
      methods: {
        dopost() {
          // 验证
          $.post( 'http://localhost:8080/admin/add', this.$data ).then();
          this.find();
        },
        dosearch() {
          $.post( 'http://localhost:8080/admin/search', {
            username: this.$data.search
          } ).then( res => {
            this.lists = res
          } );
        },
        dodelete( index, id, msg ) {
          
          this.id=id;
          $.post( 'http://localhost:8080/admin/del', {
            id: id
          } ).then( res => {
            this.lists.splice( index, 1 );
          } );
          this.displayStsates = 'none'
        },
        alertMsg(msg){
          this.displayStsates = 'block'
          this.aletMsg = msg + this.username;
        },
        find() {
          $.get( 'http://localhost:8080/admin/find' ).then( res => {
            console.log( res );
            this.lists = res
          } )
        },
        allfn(index) {
          if ( this.checked ) {
            this.checkboxlist = []
          } else {
            this.checkboxlist = [ 'ren_checkbox' ]
          }
        },
        sinfn(index){
          if(this.checkboxlist.length===1){
            this.checked=true;
          }else{
            this.checked=false;
          }
        },
        fn() {
          this.btn = true
        },
        hide() {
          this.displayStsates = 'none'
        }
      }
    } )

    const cl = new Vue( {
      el: '#cl',
      data: {
        id:'',
        aletMsg: '',
        displayStsates: 'none',
        currentIndex: this.index,
        username: '',
        age: '',
        phone: '',
        email: '',
        hobbies: [],
        search: '',
        thead: [ '姓名', '年龄', '手机号', '邮箱', '爱好', '修改', '删除' ],
        lists: [],
        checked: false,
        checkboxlist: [],
        // btn : false
      },
      // mounted() {
      //   $.get( 'http://localhost:8080/admin/find' ).then( res => {
      //     this.lists = res
      //   } );
      // },
      // methods: {
      //   dopost() {
      //     // 验证
      //     $.post( 'http://localhost:8080/admin/add', this.$data ).then();
      //   },
      //   dosearch() {
      //     $.post( 'http://localhost:8080/admin/search', {
      //       username: this.$data.search
      //     } ).then( res => {} );
      //   },
      //   dodelete( index, id ) {
      //     alert('是否确定删除');
      //     $.post( 'http://localhost:8080/admin/del', {id: id} );
      //     this.currentIndex = index;
      //   },
      //   allfn() {
      //     if ( this.checked ) {
      //       this.checkboxlist = []
      //     } else {
      //       this.checkboxlist = [ 'ren_checkbox' ]
      //     }
      //   },
      //   fn() {
      //     this.btn = true;
      //   }
      // }
    } )
  </script>

</body>

</html>